<template>
  <view class="ts-flex ts-column ts-flex-item">

    <view class="ts-flex ts-row ts-padding" style="justify-content: space-between; align-items: center;">
      <text class="ts-text-bold">2018年10月会员绩效</text>
      <view><button type="warn" size="mini">往期绩效</button></view>
    </view>
    <view class="ts-flex ts-row">
      <view class="ts-flex ts-column ts-flex-item  ts-center ts-padding">
        <text class="ts-h6">本月社群销售额</text>
        <text>451.20</text>
      </view>
      <view class="ts-flex ts-column ts-flex-item  ts-center ts-padding">
        <text class="ts-h6">本月社群新增人数</text>
        <text>0</text>
      </view>
      <view class="ts-flex ts-column ts-flex-item  ts-center ts-padding">
        <text class="ts-h6">会员活跃度</text>
        <text>11.54%</text>
      </view>
    </view>

    <view class="ts-gap"></view>


    <view class="ts-flex ts-row ts-padding">
      <text class="ts-text-bold">2018年会员新增人数及社区收益按月统计图</text>
    </view>
    <view class="ts-row">
      <view class="ts-flex ts-column ts-flex-item ts-padding" style="height: 500upx;">
        <mpvue-echarts :echarts="echarts" :onInit="lineInit" canvasId="line" />
      </view>
    </view>

    <view class="ts-gap"></view>
    <view class="ts-flex ts-column  ts-flex-item ">
      <ts-segmented-control :values="tabs" v-model="currentTab" @clickItem="onClickItem" style-type="text" active-color="#d81e06"
        borderColor="#d81e06"></ts-segmented-control>
      <view class="ts-flex ts-column ts-flex-item">
        <view v-show="currentTab == 0">
          <view class="ts-flex ts-column ts-flex-item ts-padding-top">
            <view class="table">
              <view class="table-head">
                <view class="table-col">
                  店主姓名
                </view>
                <view class="table-col">
                  本月成交额
                </view>
              </view>
              <block v-for="(item,index) in memberData" :key="index">
                <view class="table-row">
                  <view class="table-col">
                    {{item.name}}
                  </view>
                  <view class="table-col">
                    {{item.volume}}
                  </view>
                </view>
              </block>
            </view>
          </view>
        </view>

        <view v-show="currentTab == 1">
          <view class="ts-flex ts-column ts-flex-item ts-padding-top">
            <view class="table">
              <view class="table-head">
                <view class="table-col">
                  店主姓名
                </view>
                <view class="table-col">
                  本月成交额
                </view>
              </view>
              <block v-for="(item,index) in hasTraded" :key="index">
                <view class="table-row">
                  <view class="table-col">
                    {{item.name}}
                  </view>
                  <view class="table-col">
                    {{item.volume}}
                  </view>
                </view>
              </block>
            </view>
          </view>
        </view>


        <view v-show="currentTab == 2">
          <view class="ts-flex ts-column ts-flex-item ts-padding-top">
            <view class="table">
              <view class="table-head">
                <view class="table-col">
                  店主姓名
                </view>
                <view class="table-col">
                  本月成交额
                </view>
              </view>
              <block v-for="(item,index) in noTraded" :key="index">
                <view class="table-row">
                  <view class="table-col">
                    {{item.name}}
                  </view>
                  <view class="table-col">
                    {{item.volume}}
                  </view>
                </view>
              </block>
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>


<script>
  // import * as echarts from 'components/echarts/echarts.simple.min.js';
  import * as echarts from 'components/echarts/echarts.common.min.js';

  import mpvueEcharts from 'components/mpvue-echarts/src/echarts.vue';

  import tsBadge from 'components/teaset/components/ts-badge/ts-badge.vue';
  import tsSegmentedControl from 'components/teaset/components/ts-segmented-control/ts-segmented-control.vue';

  function getLineOption() {
    return {
      animation: false,
      color: ['#37A2DA', '#F00'],
      legend: {
        type: 'plain',
        data: ['新增会员', '销售额']
      },
      grid: {
        x: 50,
        y: 50,
        x2: 50,
        y2: 20
      },
      calculable: false,
      xAxis: [{
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      }],
      yAxis: [{
        name: '会员人数',
        type: 'value',
        axisLabel: {
          formatter: '{value}'
        },
        splitLine: {
          show: false
        },
        scale: true,
      }, {
        name: '销售额',
        type: 'value',
        axisLabel: {
          // formatter: '{value} 10<sup>6</sup>m³'
          formatter: '{value}'
        },
        splitLine: {
          show: false
        },
        scale: true,
      }],

      series: [{
        name: '新增会员',
        type: 'line',
        data: [2, 4, 22, 23, 2, 7, 13, 16, 8, 20, 6, 3],
        yAxisIndex: 0,
      }, {
        name: '销售额',
        type: 'line',
        data: [26, 9, 90, 64, 287, 707, 1756, 182.2, 48.7, 18.8, 6.0, 2.3],
        yAxisIndex: 1,
      }]
    }
  }

  var self;
  export default {
    components: {
      tsBadge,
      tsSegmentedControl,

      mpvueEcharts,
    },
    data() {
      return {
        echarts,
        lineInit: function(canvas, width, height) {
          let lineChart = echarts.init(canvas, null, {
            width: width,
            height: height
          });
          canvas.setChart(lineChart);

          lineChart.setOption(getLineOption());
          return lineChart;
        },
        currentTab: 0,
        tabs: ['全部', '已开单', '未开单'],
        memberData: [],
      };
    },
    onLoad: function(e) {
      self = this;

      for (let i = 1; i <= 20; i++) {
        this.memberData.push({
          name: `user ${i}`,
          volume: this.formatedVolume(Math.round((Math.random() * 5e6) * 100)), //单位为分
          hasTraded: true,
        })
      }

      for (let i = 21; i <= 30; i++) {
        this.memberData.push({
          name: `user ${i}`,
          volume: 0,
          hasTraded: false,
        })
      }

    },
    computed: {
      hasTraded() {
        return this.memberData.filter(item => item.hasTraded == true);
      },
      noTraded() {
        return this.memberData.filter(item => item.hasTraded == false);
      },

    },
    methods: {
      onClickItem(index) {
        console.log(index);
      },

      formatedVolume(volume) {
        volume = volume / 100; //转为元
        if (volume > 1e6) {
          return (volume / 1e6).toFixed(2) + '百万'
        } else if (volume > 1e4) {
          return (volume / 1e4).toFixed(2) + '万'
        } else {
          return Math.round(volume)
        }
      }
    },

  }
</script>

<style>
  /* 	page view {
		display: flex;
		flex-direction: row;
		font-size: 28upx;
	}

	page {
		min-height: 100%;
	} */


  .table {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .table-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    border-top: #C0C0C0 solid 1upx;
    height: 80upx;
    justify-content: center;
    align-items: center;
  }

  .table-row:nth-child(odd) {
    background: #EEEEEE;
  }

  .table-head {
    display: flex;
    flex-direction: row;
    width: 100%;
    border-top: #C0C0C0 solid 1upx;
    height: 80upx;
    justify-content: center;
    align-items: center;

    font-weight: bold;
    color: #FFF;
    background-color: #000000;
  }

  .table-row:last-child {
    border-bottom: #C0C0C0 solid 1upx;
  }

  .table-col {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
  }
</style>
